<template>
	<div class="my">
		<div class="user" v-if="isLogin">
			<img :src="avator" alt="">
			<b>{{ nickname }}</b>
		</div>
		<div class="user" v-else>
			<van-button type="primary" round @click="$router.push('/login')">未登录， 请登录</van-button>
		</div>

		<div class="item">
			<van-cell-group>
				<van-cell title="单元格" is-link />
				<van-cell title="单元格" is-link />
				<van-cell title="单元格" is-link />
			</van-cell-group>
		</div>
		<div class="item">
			<van-cell-group>
				<van-cell title="单元格" is-link />
				<van-cell title="历史记录" is-link @click="$router.push('/history/record')"/>
				<van-cell title="单元格" is-link />
				<van-cell title="单元格" is-link />
			</van-cell-group>
		</div>

		<div class="item">
			<van-cell-group>
				<van-cell title="单元格" is-link />
				<van-cell title="单元格" is-link />
				<van-cell title="设置" is-link />
			</van-cell-group>
		</div>


	</div>
</template>

<script setup lang="ts">
import { useStore } from 'vuex'
import { RootState } from '@/store'
import { computed } from 'vue';
const store = useStore<RootState>();
const isLogin = computed(() => store.state.user.isLogin)
const nickname = computed(() => store.state.user.nickname)
const avator = computed(() => store.state.user.avator)
</script>

<style lang="scss" scoped>
.my {
	background-color: #e1e7e9;

}
.user {
	height: 150px;
	justify-content: center;
	align-items: center;
	display: flex;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;

	img {
		height: 100px;
		width: 100px;
		border-radius: 50%;
		margin-right: 10px;
	}
}

.item {
	margin: 10px 0;
	background-color: white;
}
</style>